import { Grid, Icon, InputItem, List, NavBar } from 'antd-mobile';
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { getMsgList, sendMsg, recvMsg, readMsg } from '../../redux/chat.redux'
import { getChatId } from '../../util'

@connect(
  state => state,
  { getMsgList, sendMsg, recvMsg, readMsg }
)
class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      msg: []
    }
  }
  componentDidMount() {
    if (!this.props.chat.chatmsg.length) {
      this.props.getMsgList()
      this.props.recvMsg()
    }
  }
  componentWillUnmount() {
    const to = this.props.match.params.user
    // to => 发送者
    this.props.readMsg(to)
  }
  fixCarousel() {
    setTimeout(function () {
      window.dispatchEvent(new Event('resize'))
    }, 0)
  }
  handleSubmit() {
    // 发送者
    const from = this.props.user._id
    // 接收者
    const to = this.props.match.params.user
    // 发送的消息
    const msg = this.state.text
    this.props.sendMsg({ from, to, msg })
    this.setState({
      text: '',
      showEmoji: false
    })
  }
  render() {
    const emoji = '😀 😁 😂 😍 😘 😝 😬 🤮 🤟 🤏 👌 🤜 🙏'
      .split(' ')
      .filter(v => v)
      .map(v => ({ text: v }))

    const userid = this.props.match.params.user
    // userid => 接收方 ID
    const users = this.props.chat.users
    const Item = List.Item
    if (!users[userid]) {
      return null
    }
    // this.props.user._id => 登录者 ID
    const chatid = getChatId(userid, this.props.user._id)
    // 获取关于这个聊天室的所有信息
    const chatmsgs = this.props.chat.chatmsg.filter(v => v.chatid === chatid)
    return (
      <div id="chat-page">
        <div style={{ position: "fixed", zIndex: 999, width: '100%' }}>
          <NavBar
            mode="dark"
            icon={<Icon type="left"></Icon>}
            onLeftClick={() => {
              this.props.history.goBack()
            }}
          >
            {users[userid].name}
          </NavBar>
        </div>
        {/* 聊天列表：根据 id 进行左右区别 */}
        {chatmsgs.map(v => {
          const avatar = require(`../img/${users[v.from].avatar}.png`).default
          return v.from === userid ? (
            <List key={v._id}>
              <Item
                thumb={avatar}
                multipleLine={true}
                wrap={true}
                platform="android"
              >{v.content}</Item>
            </List>
          ) : (
              <List key={v._id}>
                <Item
                  multipleLine={true}
                  wrap={true}
                  platform="android"
                  extra={<img src={avatar} alt="" />
                  }
                  className="chat-me"
                >{v.content}</Item>
              </List>
            )
        })}
        {/* 聊天列表 */}
        <div className="stick-fooetr">
          <List>
            <InputItem
              placeholder='请输入'
              value={this.state.text}
              onChange={v => {
                this.setState({ text: v })
              }}
              extra={
                <div>
                  <span
                    style={{ marginRight: 15 }}
                    onClick={() => {
                      this.setState({
                        showEmoji: !this.state.showEmoji
                      })
                      this.fixCarousel()
                    }}
                  >😀</span>
                  <span onClick={() => this.handleSubmit()}>发送</span>
                </div>
              }
            ></InputItem>
            {this.state.showEmoji ? <Grid
              data={emoji}
              columnNum={9}
              carouselMaxRow={2}
              isCarousel={true}
              onClick={el => {
                this.setState({
                  text: this.state.text + el.text
                })
              }}
            /> : null}
          </List>
        </div>
      </div>
    )
  }
}

export default Chat
